<template>
  <el-container class="login-one">
    <el-header></el-header>
    <el-main>
      <br> <br> <br> <br> <br>
      <el-row>
        <el-col :span="8">&nbsp;</el-col>
        <el-col :span="8" style="background-color: white;height: 400px;">
          <h3 align="center">{{loginForm.title}}</h3>
          <el-form ref="form" label-width="80px">
            <br>
            <el-form-item :label="loginForm.accountName">
              <el-col :span="22">
                <el-input :placeholder="loginForm.nameInfo" v-model="userInfo.userName"></el-input>
              </el-col>
            </el-form-item>
            <el-form-item :label="loginForm.pwd" status-icon>
              <el-col :span="loginForm.num">
                <el-input :placeholder="loginForm.pwdInfo" v-model="userInfo.userPwd" show-password></el-input>
              </el-col>
              <el-col :span="11">
                <el-button type="success" rectangle v-show="loginForm.ok" @click="sendCode" size="mini">发送验证码
                </el-button>
              </el-col>
            </el-form-item>

            <el-form-item>
              <el-button type="success" round size="mini" @click="sysLogin">系统登录</el-button>
              &nbsp;
              <el-button type="success" round size="mini" @click="emailLogin">动态登录</el-button>
            </el-form-item>
            <div class="login-btn">
              <el-button type="primary" size="mini" round @click="login">登录</el-button>
            </div>
            <br />
            <div>
              <p class="change-link">
                没有账号?
                <a href="/registerEle" class="to_register"> 立即注册 </a>
              </p>
            </div>
            <br />
            <div>
              <p class="change-all">©2021 All Rights Reserved. </p>
            </div>
          </el-form>
        </el-col>
        <el-col :span="8">&nbsp;</el-col>
      </el-row>

    </el-main>
  </el-container>
</template>

<script>
  import myUtil from '../../util/myUtil'

  import axios from 'axios'

  /* post请求，需要导入qs模块 */
  import Qs from 'qs'

  export default {
    // name: "login",
    data() {
      return {
        loginForm: {
          title: "欢迎登录人力资源管理系统",
          accountName: "用户名",
          pwd: "密码",
          nameInfo: "请输入用户名",
          pwdInfo: "请输入密码",
          ok: false,
          num: 22
        },
        userInfo: {
          userId: null,
          userName: "",
          userPwd: ""
        },

      }
    },

    methods: {
      sysLogin() { //系统登录
        this.loginForm.title = "欢迎登录人力资源管理系统";
        this.loginForm.accountName = "用户名";
        this.loginForm.pwd = "密码";
        this.loginForm.nameInfo = "请输入用户名";
        this.loginForm.pwdInfo = "请输入密码";
        this.loginForm.ok = false;
        this.loginForm.num = 22;

      },
      emailLogin() { //切换动态登录
        this.loginForm.title = "欢迎登录人力资源管理系统";
        this.loginForm.accountName = "邮箱";
        this.loginForm.pwd = "验证码";
        this.loginForm.nameInfo = "请输入手机或邮箱";
        this.loginForm.pwdInfo = "请输入验证码";
        this.loginForm.ok = true;
        this.loginForm.num = 11;
      },

      login() { //登录
        var mythis = this;
        var url = myUtil.url + "/user/redisLogin"
        if (this.loginForm.accountName == "邮箱") {
          url = myUtil.url + "/user/redisLogin"
          $.ajax({
            url: myUtil.url + "/user/redisLogin",
            type: "post",
            //xhrFields: {withCredentials: true},//允许跨域请求携带cookie值,session取值用
            data: {
              "code": mythis.userInfo.userPwd,
              "email": mythis.userInfo.userName
            },
            dataType: "json",
            contentType: "application/x-www-form-urlencoded",
            success: function(data) {
              alert(data.info)
              if (data.info == "邮箱登录成功") {
                localStorage.setItem("userName", mythis.userInfo.userName);
                localStorage.setItem("userId", mythis.userInfo.userId);
                mythis.$router.replace({
                  name: "indexEle",
                  query: {
                    "userName": mythis.userInfo.userName
                  }
                });
              } else {
                mythis.$router.replace("/loginEle");
              }
            }
          })

        } else {
          url = myUtil.url + "/user/loginPost"
          axios({
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded'
            }, //请求头部
            method: "post", //请求方式
            url: myUtil.url + "/user/loginPost", //请求地址
            data: Qs.stringify(mythis.userInfo) // 请求参数
          }).then(function(rs) {
            alert(rs.data.info)
            if (rs.data.info == "登录成功") {
              //存储方式
              localStorage.setItem("userName", mythis.userInfo.userName);
              localStorage.setItem("userId", rs.data.info1);
              mythis.$router.replace({
                name: "indexEle",
                query: {
                  "userName": mythis.userInfo.userName
                }
              });
            } else {
              mythis.$router.replace("/loginEle");
            }

          })
        }
      },

      sendCode() { //发送验证码
        var mythis = this;
        $.ajax({
          url: myUtil.url + "/user/redisSend",
          type: "post",
          //xhrFields: {withCredentials: true},//允许跨域请求携带cookie值
          data: {
            "email": mythis.userInfo.name
          },
          dataType: "json",
          contentType: "application/x-www-form-urlencoded",
          success: function(data) {
            alert(data.info)
          }

        })

      }

      // mounted() {

      // }
    }
  }
</script>

<style>
  html,
  body {
    height: 100%;
  }


  .login-one {
    background-color: #1c77ac;
    background-image: url(../../../static/image/beijing3.png);
    background-repeat: no-repeat;
    /*	//background-position:center top;*/
    overflow: hidden;
    height: 100%;
  }

  .login-btn {
    text-align: center;
  }

  .login-btn button {
    width: 400px;
    height: 36px;
  }

  .login-reg {
    text-align: right
  }

  .login-reg button {
    width: 28%;
    height: 26px;
  }

  .change-link {
    text-align: center;
  }

  .change-all {
    text-align: center;
  }
</style>
